<template>
    <div class="component">
        <!--面包屑导航-->
        <Breadcrumb :menulist="[`${componentType == 1 ? '项目' : '产品'}`, '表单', '部件按钮']" :showSystem="false"
                    showBack></Breadcrumb>

        <!--table-->
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="tabHeader" style="justify-content: flex-end">
                <p class="tit" style="margin-right: auto;">部件按钮</p>
                <el-button type="primary" icon="el-icon-plus" @click="openAdd">添加部件按钮</el-button>
            </div>

            <el-table stripe :data="list.list" current-row-key="formPartId" style="width: 100%">
                <!--<el-table-column label="部件按钮ID" prop="fpButtonId"></el-table-column>-->
                <el-table-column label="部件按钮编码" prop="buttonCode"></el-table-column>
                <el-table-column label="部件按钮名称" prop="buttonName"></el-table-column>
                <el-table-column label="所属部件" prop="formPartName"></el-table-column>
                <el-table-column label="所属表单" prop="formName"></el-table-column>
                <el-table-column label="操作类型" prop="operationType.displayName"></el-table-column>
                <!--<el-table-column label="IndexNo" prop="indexNo"></el-table-column>-->
                <el-table-column label="打开表单" prop="openFormName"></el-table-column>
                <el-table-column label="打开地址" prop="url"></el-table-column>
                <el-table-column label="是否禁用" prop="isDisable" :formatter="formatter"></el-table-column>
                <el-table-column label="是否系统" prop="isSystem" :formatter="formatter"></el-table-column>
                <el-table-column label="是否扩展" prop="isExtend" :formatter="formatter"></el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click.stop="openEdit(scope.row)">编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @onConfirm="del(scope.row.fpButtonId)" style="margin-left: 10px;">
                            <el-button slot="reference" size="mini" type="danger">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="slot, total, prev, pager, next, jumper"
                    :total="list.total"
                    :current-page.sync="currentPage"
                    :page-size="rows"
                    @current-change="changePage"
            >
                <el-button v-if="list.list.length>0" icon="el-icon-refresh" type="primary" style="margin-right: 10px; background: #409EFF; color:#fff" @click="getList"></el-button>
            </el-pagination>
        </el-card>

        <!--添加表单-->
        <el-drawer
                title="添加Form"
                :show-close="false"
                :with-header="false"
                :before-close="cancelForm"
                :visible.sync="showAdd"
                direction="rtl"
                ref="drawer"
                :wrapperClosable="false"
        >
            <div class="drawerTitle">{{type === 1 ? '新增部件按钮' : type === 2 ? '编辑部件按钮' : '删除部件按钮'}}</div>
            <div class="add-drawer">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <el-form-item :label-width="formLabelWidth" label="部件按钮编码">
                        <el-input v-model="form.buttonCode" :disabled="type !== 1"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="部件按钮名称">
                        <el-input v-model="form.buttonName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="操作类型" prop="operationType">
                        <el-select v-model="form.operationType" style="width: 100%;" placeholder="请选择"
                                   :disabled="type === 3">
                            <el-option label="Page" value="0"></el-option>
                            <el-option label="GetData" value="1"></el-option>
                            <el-option label="Process" value="2"></el-option>
                            <el-option label="BatchProcess" value="3"></el-option>
                            <el-option label="UploadFile" value="4"></el-option>
                            <el-option label="DownloadFile" value="5"></el-option>
                            <el-option label="Client" value="6"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="打开表单">
                        <el-select v-model="form.openFormId" style="width: 100%;" placeholder="请选择"
                                   :disabled="type === 3">
                            <el-option v-for="item in formList" :key="item.formId" :label="item.formName" :value="item.formId"></el-option>
                        </el-select>
                        <el-button type="text" size="mini" icon="el-icon-thumb" @click="openDialog">选择表单</el-button>
                        <el-button type="text" size="mini" icon="el-icon-delete" @click="clearForm">表单清除</el-button>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="打开地址">
                        <el-input v-model="form.url"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属部件">
                        <el-input v-model="form.formPartName" disabled></el-input>
                    </el-form-item>
                    <!--<el-form-item :label-width="formLabelWidth" label="关联模型">
                        <el-input v-model="form.modelName" disabled></el-input>
                    </el-form-item>-->
                    <el-form-item :label-width="formLabelWidth" label="所属表单">
                        <el-input v-model="form.formName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属组件">
                        <el-input v-model="form.componentName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属模块">
                        <el-input v-model="form.moduleName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属项目" v-if="componentType==1">
                        <el-input v-model="form.solutionName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属产品">
                        <el-input v-model="form.topSolutionName" disabled></el-input>
                    </el-form-item>
                    <!--<el-form-item :label-width="formLabelWidth" label="indexNo">
                        <el-input v-model="form.indexNo" disabled></el-input>
                    </el-form-item>-->
                    <el-form-item :label-width="formLabelWidth" label="是否扩展">
                        <el-switch v-model="form.isExtend"></el-switch>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否系统">
                        <el-switch v-model="form.isSystem"></el-switch>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否禁用">
                        <el-switch v-model="form.isDisable"></el-switch>
                    </el-form-item>
                </el-form>

                <div class="add-drawer_foot">
                    <el-button @click="cancelForm()">取 消</el-button>
                    <el-button plain icon="el-icon-delete" @click="reset()" v-if="type === 1">清除</el-button>
                    <el-button type="primary" @click="ok('ruleForm')" :loading="addLoading">{{ addLoading ? '提交中 ...' :
                        '确 定' }}
                    </el-button>
                </div>
            </div>
        </el-drawer>

        <!--选择表单弹窗-->
        <el-dialog title="选择表单" :visible.sync="dialogVisible" :close-on-click-modal="false" :fullscreen="true">
            <el-form :inline="true" :model="dialogForm">
                <el-form-item label="表单编码" :label-width="dialogFormLabelWidth">
                    <el-input v-model="dialogForm.formCode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="表单名称" :label-width="dialogFormLabelWidth">
                    <el-input v-model="dialogForm.formName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属模块" :label-width="dialogFormLabelWidth">
                    <el-select v-model="dialogForm.moduleId" placeholder="选择所属模块" clearable @change="changeModule">
                        <el-option v-for="item in modulesList" :key="item.moduleId" :label="item.moduleName" :value="item.moduleId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属组件" :label-width="dialogFormLabelWidth">
                    <el-select v-model="dialogForm.componentId" placeholder="选择所属组件" clearable :disabled="!dialogForm.moduleId">
                        <el-option v-for="item in componentsList" :key="item.componentId" :label="item.componentName" :value="item.componentId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryForm">查询</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="selectAndBack">选择并返回</el-button>
            </div>

            <el-table :data="gridData.list" highlight-current-row @current-change="selectRow">
                <el-table-column property="formCode" label="表单编码"></el-table-column>
                <el-table-column property="formName" label="表单名称"></el-table-column>
                <el-table-column property="url" label="表单地址"></el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :total="gridData.total"
                    :current-page.sync="page"
                    :page-size="size"
                    @current-change="changeDialogPage"
            >
            </el-pagination>
        </el-dialog>
    </div>
</template>

<script>
    import Breadcrumb from "@/components/Breadcrumb.vue";
    import {request, url} from "@/api/request";

    export default {
        name: "ComponentPartBtn",
        components: {
            Breadcrumb
        },
        data() {
            return {
                formId: '',
                componentID: '',
                list: {
                    list: [],
                },
                currentPage: 1,
                rows: 10,
                modelsList: [],//模型列表
                FormDefault: {},
                addLoading: false,
                showAdd: false,
                formLabelWidth: '110px',
                type: 1,//1新增 2编辑 3删除
                rules: {
                    buttonCode: [
                        {required: true, message: '必填', trigger: 'change'},//change
                    ],
                    buttonName: [
                        {required: true, message: '必填', trigger: 'change'},
                    ],
                    operationType: [
                        {required: true, message: '必选', trigger: 'change'},
                    ],
                },
                form: {
                    isExtend: false,
                    isSystem: false,
                    isDisable: false,
                },

                dialogVisible: false,
                dialogForm:{
                    formCode:'',
                    formName:'',
                    componentId:'',
                    moduleId:'',
                },
                dialogFormLabelWidth: '80px',
                page:0,
                size:10,
                gridData: {
                    list:[],
                },
                currentRow:null,
                formList:[],
                modulesList:[],
                componentsList:[],
            };
        },
        props: {
            componentType: {
                type: Number,
                default: 1,//1组件，2产品
            },
        },
        created() {

        },
        mounted() {
            let obj = this.getLocationParams(location.href.split('?')[1])
            obj.formPartId && (this.formPartId = obj.formPartId);
            this.getList();
        },
        methods: {
            getList() {
                request(`${url.getPartBtnList}/${this.formPartId}`, {
                    // loading:1,
                    data: {
                        currentPage: this.currentPage,
                        rows: this.rows,
                    }
                }, res => {
                    this.list = res.data;
                })
            },
            formatter(row, column, cellValue, index) {
                return cellValue ? '是' : '否';
            },
            changePage(e) {
                this.currentPage = e;
                this.getList();
            },

            //打开添加表单
            openAdd() {
                this.type = 1;
                this.showAdd = true;
                this.reset();
                //请求关联主模型和所属组件等
                this.getDefault();
            },
            openDel(row) {
                //
            },
            openEdit(row) {
                request(`${url.checkParBtnCanEdit}/${row.fpButtonId}`, {
                    data: {
                        IsSystem: row.isSystem,
                    },
                }, res => {
                    if (res.code === '1') {
                        this.type = 2;
                        this.showAdd = true;
                        this.reset();
                        let obj = {
                            operationType: row.operationType.code,
                        }
                        // row = this.replaceAllNumber(row);

                        this.form = {
                            ...row,
                            ...obj,
                        }
                        this.formList = [{
                            formName:this.form.openFormName,
                            formId:this.form.openFormId,
                        }]
                        console.log(this.formList);
                        this.form.operationType = this.form.operationType + '';
                        this.form.formId = this.form.formId + '';
                        this.getDefault();
                    } else {
                        this.$notify.success(res.message);
                        //message
                    }
                }, () => {

                })
            },
            ok(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addLoading = true;
                        if (this.type === 1) {
                            this.add();
                        } else if (this.type === 2) {
                            this.edit();
                        } else if (this.type === 3) {
                            this.del();
                        }
                    } else {
                        this.$message({
                            message: '有未完成的必填项！',
                            type: 'warning',
                        })
                        return false;
                    }
                });
            },
            getDefault() {
                request(`${url.getPartBtnDefault}/${this.formPartId}`, {}, res => {
                    this.form = {
                        ...this.form,
                        ...res.data,
                    };
                })
            },
            cancelForm() {
                this.addLoading = false;
                this.showAdd = false;
                this.reset();
            },
            add() {
                this.form = this.replaceAllBoolean(this.form);
                request(`${url.savePartBtn}`, {
                    method: 'POST',
                    data: {
                        ...this.form,
                        formPartId: this.formPartId,
                    },
                }, res => {
                    this.addLoading = false;
                    this.$refs.drawer.closeDrawer();
                    this.reset();
                    this.$notify.success(res.message);
                    this.getList();
                }, () => {
                    this.addLoading = false;
                })
            },
            edit(canEdit) {
                // if (!canEdit) return;

                this.form = this.replaceAllBoolean(this.form);
                request(`${url.savePartBtn}/${this.form.fpButtonId}`, {
                    method: 'PUT',
                    data: {
                        ...this.form,
                        formPartId: this.formPartId,
                    },
                }, res => {
                    this.addLoading = false;
                    this.$refs.drawer.closeDrawer();
                    this.reset();
                    this.$notify.success(res.message);
                    this.getList();
                }, () => {
                    this.addLoading = false;
                })
            },
            del(fpButtonId) {
                request(`${url.savePartBtn}/${fpButtonId}`, {
                    method: 'delete',
                }, res => {
                    // this.addLoading = false;
                    // this.$refs.drawer.closeDrawer();
                    this.reset();
                    this.$notify.success(res.message);
                    this.getList();
                }, () => {
                    this.addLoading = false;
                })
            },

            openDialog(){
                this.dialogVisible = true;
                this.queryForm();
                this.getModules();
            },
            changeDialogPage(e) {
                this.page = e;
                this.queryForm();

            },
            queryForm(){
                request(`${url.formsChoice}/${this.$store.state.solution_global.solutionId}`, {
                    // loading:1,
                    data: {
                        currentPage: this.page,
                        rows: this.size,
                        formCode:this.dialogForm.formCode,
                        formName:this.dialogForm.formName,
                        componentId:this.dialogForm.componentId,
                        moduleId:this.dialogForm.moduleId,
                    }
                }, res => {
                    this.gridData = res.data;
                })
            },
            getModules(){
                request(`${url.modulesSelect}/${this.$store.state.solution_global.solutionId}`, {
                    data:{
                        currentPage:0,
                        rows:10,//这里的分页参数没有用，只是为了不报错
                    },
                }, res => {
                    this.modulesList = res.data;
                })
            },
            getComponents(){
                request(`${url.componentsSelect}/${this.dialogForm.moduleId}`, {
                    data:{
                        solutionId:this.$store.state.solution_global.solutionId,
                    },
                }, res => {
                    this.componentsList = res.data;
                })
            },
            changeModule(){
                if(!this.dialogForm.moduleId) return;
                this.getComponents();
            },
            selectRow(row, oldRow){
                this.currentRow = row;
            },
            selectAndBack(){
                if(!this.currentRow){
                    this.$message({
                        message:'请先选择一项表单！',
                        type:'warning',
                    })
                    return;
                }
                this.formList = [this.currentRow];
                this.form.openFormId = this.currentRow.formId;
                this.form.url = this.currentRow.url;
                this.dialogVisible = false;
            },
            clearForm(){
                this.formList = [];
                this.form.openFormId = '';
            },


            reset() {
                this.type === 1 ?
                    this.form = {
                        ...this.form,
                        buttonCode: '',
                        buttonName: '',
                        operationType: undefined,
                        openFormId:undefined,
                        url:'',
                        isExtend: false,
                        isSystem: false,
                        isDisable: false,
                    } :
                    this.form = {
                        ...this.form,
                        buttonName: '',
                        operationType: undefined,
                        openFormId:undefined,
                        url:'',
                        isExtend: false,
                        isSystem: false,
                        isDisable: false,
                    };
            },
            toPartField(row) {
                console.log(row);
            },
            toPartBtn(row) {
                console.log(row);
            },
        }
    };
</script>

<style scoped>
    .add-drawer {
        padding: 20px 20px 20px 15px;
    }

    .add-drawer_foot {
        text-align: center;
    }

    .drawerTitle {
        line-height: 70px;
        font-size: 20px;
        margin-left: 30px;
    }

    .tree {
        margin-left: 30px;

    }

    .tabHeader {
        display: flex;
        align-items: center;
    }

    .tit {
        font-weight: bold;
        font-size: 20px;
        display: inline;
        margin-right: 15px;
    }

    .box-card {
        margin-bottom: 15px;
    }

</style>
